{% extends 'front/settle_pay/base_settle_pay.html' %}
{% block title %}结算{% endblock %}

{% block css %}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/address/ydui_buy_list.css') }}">
{% endblock %}

{% block main %}
    {#    收货人信息#}
    <div class="row clearfix">
        <div class="col-md-1 column">
        </div>
        <div class="col-md-10 column">
            <h3>
                收货人信息
            </h3>
            {% if addr %}
                <div class="col-md-4">
                <table class="table table-hover con_info addr_tables left" id="{{ addr['_id'] }}">
                    <span style="display: none" id="addr_id">{{ addr['_id'] }}</span>
                    <thead>
                    <tr>
                        <th>
                            <span class="name ">{{ addr['name'] }}</span>
                            <span class="tel right">{{ addr.tel }}</span>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="success">
                        <td>
                                <span class="address">
                                    <span class="province">{{ addr.province }}</span>
                                    <span class="city">{{ addr.city }}</span>
                                    <span class="district">{{ addr.district }}</span>
                                    <span class="details">{{ addr.details }}</span>
                                </span>
                        </td>
                    </tr>
                    <tr class="info">
                        <td>
                            <div>
                                <a href="#" class="addr_edit btn btn-primary">编辑</a>
                                <a href="#" class="addr_delete btn btn-danger">删除</a>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                </div>
            {% endif %}
            <div class="col-md-offset-1">
                <a type="button" href="#" class="btn btn-default left" id="new_addr">新增收货地址</a>
            </div>
            {#            增加收货人地址信息#}
            <div class="add_address" style="display: none;">
                <div class="graybox"></div>
                <div class="popbox">
                    <div class="poptop">
                        <a href="" class="close"></a>
                    </div>
                    <form method="post" action="{{ url_for('products.address') }}">
                        <div class="top"></div>
                        <div class="content">
                            <h3>填写收货人信息</h3>
                            <ul>
                                <li><span>姓名</span><input name="name" id="addr_name" required></li>
                                <li><span>手机号码</span>
                                    <input name="tel" id="addr_tel" required minlength="11" maxlength="11"
                                           pattern="[0-9]{11}">
                                </li>
                                <li><span class="">所在地区</span>
                                    <section class="g-flexview">
                                        <section class="g-scrollview">
                                            <div class="m-cell">
                                                <div class="cell-item">
                                                    <div class="cell-right cell-arrow">
                                                        <input type="text"
                                                               class="cell-input"
                                                               readonly id="J_Address2"
                                                               value="{% if addr.province %} {{ addr.province }} {{ addr.city }}{% endif %}"
                                                               placeholder="请选择收货地址" name="address">
                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                    </section>
                                </li>
                                <li><span>详细地址</span><input name="details" id="addr_details"></li>
                            </ul>
                        </div>
                        <div class="bottom">
                            <button class="btn addr_close" type="reset">取消</button>
                            <button class="btn" type="submit">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-1 column">
        </div>
    </div>
    <hr>
    {#    收货清单#}
    <div class="row clearfix">
        <div class="col-md-1 column">
        </div>
        <div class="col-md-10 column">
            <h3>收货清单</h3>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th class="content">
                        商品名称
                    </th>
                    <th class="content">
                        单价
                    </th>
                    <th class="content">
                        数量
                    </th>
                    <th class="content">
                        总价
                    </th>
                </tr>
                </thead>
                <script type="text/javascript">
                    var books_ = new Array();
                    var i = 0;
                </script>
                <tbody>
                {% for book in books %}
                    <script type="text/javascript">books_[i] = '{{ book._id }}';
                    i++</script>
                    <tr>
                        <td>
                            <div class="book_img left"><img src={{ book['img_url'] }}></div>
                            <div class="title"><a
                                    href="{{ url_for('products.product', id=book['_id']) }}">{{ book.title }}</a></div>
                        </td>
                        <td class="content">
                            {{ book.price }}
                        </td>
                        <td class="content">
                            {{ book.book_num }}
                        </td>
                        <td class="content">
                            {{ book['sum_price'] }}
                        </td>
                    </tr>
                {% endfor %}
                <tr>
                    <td colspan="4">
                        <div class="right">
                            <span>{{ books_price.package }}个包裹</span>
                            <span>商品金额：{{ books_price.sum_price }}￥</span>
                            <span>运费：{{ books_price.freight }}￥</span>
                            <span>促销优惠：-  {{ books_price.discount }}￥</span>
                        </div>
                        <br><br>
                        <div class="right"><span>合计：</span><span
                                class="sum">{{ books_price.sum }}￥</span></div>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>
        <div class="col-md-1 column">
        </div>
    </div>
    {#    结算#}
    <div class="row clearfix">
        <div class="col-md-1 column">
        </div>
        <div class="col-md-10 column order_det">
            <div class="con_add ">
                <address class="right"><strong>寄送至：</strong>
                    <span>{{ addr['province'] }}</span>
                    <span>{{ addr['city'] }}</span>
                    <span>{{ addr['details'] }}</span>
                    <span><strong>收货人：</strong></span>
                    <span>{{ addr.name }}</span>
                    <abbr title="Phone">{{ addr.tel }}</abbr>
                </address>
                <br>
                <p class="right time">预计{{ shipping_time.strftime('%Y年%m月%d日') }}送达</p>
            </div>
            <div class="to_pay right">
                <div>
                    <span class="sum_books">共{{ pay.sum_book }}件商品</span>
                    <span>应付金额：</span>
                    <span class="sum_mon" id="amount_pay">{{ pay['amount_pay'] }}</span>
                    <span class="con_mon">（含运费{{ pay.freight }}元）</span>
                </div>
                <br>
                <div class="btn pay_btn right"><a href="#" id="go-to-pay-btn" type="button" onclick="to_pay('{{ is_buy_now }}')">去支付</a>
                </div>

            </div>
        </div>
        <div class="col-md-1 column">
        </div>
    </div>
    <script type="text/javascript">
        var addr_id = {{ addr['_id'] }};
        var books_ = {{ books }};
    </script>

{% endblock %}

{% block js %}
    {{ super() }}
    <script type="text/javascript" src="{{ url_for('static', filename='js/address/ydui.flexible.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/pay.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/address/ydui.citys.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/address/ydui.js') }}"></script>
    <script type="text/javascript">
        /**
         * 默认调用
         */
        !function () {
            var $target = $('#J_Address');

            $target.citySelect();

            $target.on('click', function (event) {
                event.stopPropagation();
                $target.citySelect('open');
            });

            $target.on('done.ydui.cityselect', function (ret) {
                $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
            });
        }();
        /**
         https://www.jb51.net/jiaoben/577191.html#downintro2
         * 设置默认值
         */
        !function () {
            var $target = $('#J_Address2');

            $target.citySelect({
                provance: "",
                city: "",
                area: ""
            });

            $target.on('click', function (event) {
                event.stopPropagation();
                $target.citySelect('open');
            });

            $target.on('done.ydui.cityselect', function (ret) {
                $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
            });
        }();
    </script>
{% endblock %}